<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Progress from "./Progress.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import Icon from "@iconify/svelte";

    const { Story } = defineMeta({
        title: "Components/Form/Progress",
        component: Progress,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space dir="v">
            <Progress value={30} />
            <Progress value={50} status="active" />
            <Progress value={70} status="error" />
            <Progress value={100} />
        </Space>
    {/snippet}
</Story>

<Story name="InnerText">
    {#snippet template(args)}
        <Space dir="v">
            <Progress value={70} textInside strokeWidth={16} />
            <Progress value={70} textInside strokeWidth={16} status="active" />
            <Progress value={100} textInside strokeWidth={16} />
        </Space>
    {/snippet}
</Story>

<Story name="StrokeWidth">
    {#snippet template(args)}
        <Space dir="v">
            <Progress value={70} strokeWidth={5} />
            <Progress value={70} textInside strokeWidth={16} status="active" />
        </Space>
    {/snippet}
</Story>

<Story name="HideText">
    {#snippet template(args)}
        <Space dir="v">
            <Progress value={70} hidePercent />
        </Space>
    {/snippet}
</Story>

<Story name="StrokeColor">
    {#snippet template(args)}
        <Progress value={50} strokeColor={["#108ee9", "#87d068", "#d9363e"]} />
    {/snippet}
</Story>

<Story name="Value" args={{ value: 0 }}>
    {#snippet template(args)}
        <Space dir="v">
            <Progress value={args.value} />
            <Space dir="h">
                <Button
                    type="primary"
                    onclick={() => {
                        args.value = args.value + 1;
                    }}>增加</Button
                >
                <Button
                    type="primary"
                    onclick={() => {
                        args.value = args.value - 1;
                    }}>减少</Button
                >
            </Space>
        </Space>
    {/snippet}
</Story>

<Story name="Cicle" args={{ value: 0 }}>
    {#snippet template(args)}
        <Progress value={args.value} type="circle" />
        <Space dir="h">
            <Button
                type="primary"
                onclick={() => {
                    args.value = args.value + 1;
                }}>增加</Button
            >
            <Button
                type="primary"
                onclick={() => {
                    args.value = args.value - 1;
                }}>减少</Button
            >
        </Space>
    {/snippet}
</Story>

<Story name="CicleColors" args={{ value: 0 }}>
    {#snippet template(args)}
        <Progress
            type="circle"
            value={args.value}
            strokeColor={[
                { percent: 20, color: "#108ee9" },
                { percent: 50, color: "#87d068" },
                { percent: 70, color: "#d9363e" },
            ]}
        />
        <Space dir="h">
            <Button
                type="primary"
                onclick={() => {
                    args.value = args.value + 5;
                }}>增加</Button
            >
            <Button
                type="primary"
                onclick={() => {
                    args.value = args.value - 5;
                }}>减少</Button
            >
        </Space>
    {/snippet}
</Story>

<Story name="InfoRender">
    {#snippet template(args)}
        {#snippet infoRender(sta: string, value: number)}
            {#if value === 100}
                完成
            {:else}
                进行中
            {/if}
        {/snippet}
        <Progress type="circle" value={100} {infoRender} />
    {/snippet}
</Story>
